<template >
    <section class="cicd-items">

        <el-col :span="24"  style="padding-bottom: 0px;width: 100%">
            <el-form :inline="true" :model="filters" size="mini">
                <el-form-item>
                    <el-input v-model="filters.itemName" placeholder="项目名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getItemByName" >查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addItemTab">新增 </el-button>
                </el-form-item>
            </el-form>
        </el-col>

        <!--新增任务-->

        <!--列表-->
        <el-table :data="deploymentItems" highlight-current-row   style="width: 100%;" border>
            <el-table-column type="selection" width="55">
            </el-table-column>

            <el-table-column prop="name" label="项目名" width="150" >
            </el-table-column>
            <el-table-column  prop="deploymode" label="部署方式" width="100" >
                <template slot-scope="scope">
                    <!--<el-tag :type="scope.row.laststatus=='成功'? 'success': 'danger'"  :style="scope.row.laststatus=='成功'? 'color:green': 'color:red'" size="mini">{{ scope.row.laststatus }}</el-tag>-->
                    <div v-if="scope.row.deploymode==='ansible'">
                        <el-tag  size="mini" hit> {{scope.row.deploymode}} </el-tag>
                    </div>
                    <div v-else-if="scope.row.deploymode==='k8s'">
                        <el-tag type="success"  size="mini" hit> {{scope.row.deploymode}} </el-tag>
                    </div>
                </template>

            </el-table-column>
            <el-table-column prop="laststatus" label="上次状态" width="100" >
                <template slot-scope="scope">
                    <!--<el-tag :type="scope.row.laststatus=='成功'? 'success': 'danger'"  :style="scope.row.laststatus=='成功'? 'color:green': 'color:red'" size="mini">{{ scope.row.laststatus }}</el-tag>-->
                    <div v-if="scope.row.laststatus==='成功'">
                        <el-tag type="success" size="mini"> {{scope.row.laststatus}} </el-tag>
                    </div>
                    <div v-else-if="scope.row.laststatus==='失败'">
                        <el-tag type="danger"  size="mini"> {{scope.row.laststatus}} </el-tag>
                    </div>
                    <div v-else>
                        <el-tag   size="mini"> 未构建 </el-tag>
                    </div>
                </template>

            </el-table-column>
            <el-table-column prop="lastsuccess" label="上次成功" width="180">
            <template slot-scope="scope">
                <!--<el-tag :type="scope.row.laststatus=='成功'? 'success': 'danger'"  :style="scope.row.laststatus=='成功'? 'color:green': 'color:red'" size="mini">{{ scope.row.laststatus }}</el-tag>-->
                <div v-if="scope.row.lastsuccess!==''">
                     {{scope.row.lastsuccess}}
                </div>
                <div v-else>
                     无
                </div>
            </template>



            </el-table-column>
            <el-table-column prop="lastfail" label="上次失败" width="180"   >
                <template slot-scope="scope">
                    <!--<el-tag :type="scope.row.laststatus=='成功'? 'success': 'danger'"  :style="scope.row.laststatus=='成功'? 'color:green': 'color:red'" size="mini">{{ scope.row.laststatus }}</el-tag>-->
                    <div v-if="scope.row.lastfail!==''">
                        {{scope.row.lastfail}}
                    </div>
                    <div v-else>
                        无
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="lastdurtime" label="上次持续时间" width="120" >
                <template slot-scope="scope">
                    <!--<el-tag :type="scope.row.laststatus=='成功'? 'success': 'danger'"  :style="scope.row.laststatus=='成功'? 'color:green': 'color:red'" size="mini">{{ scope.row.laststatus }}</el-tag>-->
                    <div v-if="scope.row.lastdurtime!==0">
                        {{scope.row.lastdurtime}}
                    </div>
                    <div v-else>
                        无
                    </div>
                </template>

            </el-table-column>
            <el-table-column label="操作" fit>
                <template scope="scope">
                    <el-button type="warning" size="mini"  icon="el-icon-caret-right" @click="startDeploy(scope.$index, scope.row)">构建</el-button>
                    <el-button type="primary" size="mini" @click="itemConfigEdit(scope.$index, scope.row)" >配置</el-button>
                    <el-button type="danger" size="mini" @click="deleteItem(scope.$index, scope.row)">删除</el-button>
                    <el-button type="success" size="mini" @click="itemWorkspace(scope.$index, scope.row)">工作空间</el-button>
                    <el-button type="success" size="mini" @click="itemOutput(scope.$index, scope.row)">控制台输出</el-button>
                </template>
            </el-table-column>

            <el-table-column label="进度"  width="150">
                <template scope="scope">
                    <template v-if="!!progressData[scope.row.name]" >
                        <el-progress :percentage="progressData[scope.row.name].precent" color="#99CCFF" v-if="progressData[scope.row.name].status" :show-text="false"></el-progress>
                    </template>
                    <div v-else>暂未发布</div>
                </template>

            </el-table-column>



        </el-table>
    </section>
</template>

<script>
    import { getDeployItems,StartDeploy,DeleteItem,LoadProgressData } from '../../api/api'
    export default {
        data()  {
            return {
                filters: {
                    itemName: ''
                },
                deploymentItems: [
                    {
                        name: "test-item1",
                        deployMode: "ansible-playbook",
                        lastSuccess: "2019-04-10 15:39",
                        lastFail: "2019-04-10 15:39",
                        lastExecTime: "1分50秒",
                        status: "成功"
                    }

                ],
                progressData: {
                },

            }
        },
        methods: {
            getItemByName() {
                let self = this
                if (self.filters.itemName.trim() === ""){
                    return
                }
                self.deploymentItems  = self.deploymentItems.filter( function (value) {
                        return value.name === self.filters.itemName
                    }
                )
            },
            addItemTab() {
                this.$emit('addNewItem');
                //this.$parent.addTab("1")
            },
            getAllDeployItems(){
                getDeployItems().then((res) => {
                    console.log(res.data.items)
                    this.deploymentItems = res.data.items
                    }
                )
            },
            itemConfigEdit(index,row){
                console.log(row)
                this.$emit('configItem',row);
            }, //配置
            itemWorkspace(index,row){
                console.log(row)
                this.$emit('workspaceItem',row);
            }, //工作空间
            itemOutput(index,row){
                console.log(row)
                this.$emit('itemOutput',row);
            }, //工作空间
            startDeploy(index,row){
                this.getProgressData()   //每次构建都刷新下  是否能异步
                console.log("start deploy row :" , row)
                console.log("start deploy :" , row.name)

                StartDeploy(row).then((res) => {
                    console.log("start result",res)
                            if (res.code===400) {
                                this.$message({
                                    message: res.message,
                                    type: 'error',
                                    duration: 2000,
                                    }
                                );
                            }
                })
            },
            deleteItem(index,row){
                let self = this
                let param = {name: row.name,yamlpath: row.yamlpath}

                console.log("delete item: " , row.name)
                console.log("index : " , index)

                this.$confirm('此操作将永久删除该项目, 是否继续?', '警告', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',

                }).then(() => {
                    DeleteItem(param).then((res) => {
                            console.log("the delete result code :" , res.code)
                            if (res.code === 200) {
                                console.log("the delete result :" , res)
                                console.log("the delete result :" , this.deploymentItems)
                                self.deploymentItems.splice(index,1)
                                this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });

                            }
                    })


                }).catch(() => {

                });

            },
            getProgressData(){
                let self = this
                LoadProgressData().then((res) => {
                    console.log(res.data)

                    if ( res.data.visible) {
                        console.log(" here ",res.data.progressResult)
                        self.progressData = JSON.parse(res.data.progressResult)
                    } else {
                        self.progressData = {}
                    }
                    //self.progressData = JSON.parse(res.data.progressResult)
                    //setTimeout(this.getProgressData, 3000)
            }
        )
    },



        },
        mounted() {

            this.getAllDeployItems();
            this.getProgressData()   //加载页面马上刷新
            const timer = setInterval(() =>{
                this.getProgressData()
            }, 300000);
                // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
            this.$once('hook:beforeDestroy', () => {
                clearInterval(timer);
            })



        },
    }
</script>
<style>

    .cicd-items .toolbar {
        height: 50px;
    }
</style>